import React from 'react';
import { withRouter, router } from 'umi';
import { Button } from 'antd';
import { Provider, KeepAlive } from 'react-keep-alive';
import { PageContainer } from '@/molecules';
import authHelper from '@/utils/auth/helper';
import { useWorkFlow } from '@/hooks';
import { newTabProps } from '@/utils/tab';
import AuthComponent from '@/utils/auth/AuthComponent';

import { CurrentLeaveList, HistoryLeaveList } from './components';

const { checkCode } = authHelper;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const List = ({ location }) => {
    const { query } = location;
    const tabList = [
        {
            key: '1',
            tab: '离职中',
            code: true,
            component: (
                <KeepAlive name="CurrentLeaveList">
                    <CurrentLeaveList location={location} />
                </KeepAlive>
            )
        },
        {
            key: '2',
            tab: '历史记录',
            code: true,
            component: (
                <KeepAlive name="HistoryLeaveList">
                    <HistoryLeaveList location={location} />
                </KeepAlive>
            )
        }
    ];
    const filterList = tabList.filter(item => checkCode(item.code)) || [];
    const [activeKey, setActiveKey] = React.useState(query?.activeKey || filterList[0]?.key || '1');
    const [savedQuery, setSavedQuery] = React.useState(null);
    const handleTabChange = key => {
        setActiveKey(key);
        history.push({ query: { ...savedQuery?.[key], activeKey: key } });
    };
    React.useEffect(() => {
        const key = query?.activeKey || filterList[0]?.key || '1';
        setActiveKey(key);
        setSavedQuery({
            ...savedQuery,
            [key]: query
        });
    }, [query]);
    const { launch } = useWorkFlow({ launchParam: { type: 'DimissionProxyApply' } });

    return (
        <PageContainer
            tabList={filterList}
            activeTabKey={activeKey}
            onTabChange={handleTabChange}
            tabBarExtraContent={
                <AuthComponent code="office:personnel:onboardandleave:leave:apply">
                    <Button
                        type="primary"
                        onClick={() => {
                            launch(undefined, newTabProps);
                        }}
                        style={{ marginTop: 11 }}
                    >
                        发起离职申请
                    </Button>
                </AuthComponent>
            }
        >
            <Provider> {filterList?.find(item => item.key === activeKey)?.component}</Provider>
        </PageContainer>
    );
};

export default withRouter(List);
